<template>
	<!-- 歌单界面 -->
	<transition name="slide">
		<music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>
	</transition>
</template>

<script>
import MusicList from 'components/music-list/music-list'
import {VoCalist} from 'api/singer'; //首页请求方式
import {mapGetters} from 'vuex'
export default {
  name: 'disc',
	data(){
		return{
			songs:[]
		}
	},
	computed:{
		title(){
			return this.disc.name
		},
		bgImage(){
			return this.disc.pic
		},
		...mapGetters([
			'disc'
		]) 
	},
	created(){
		this._getSongList()
	},
	methods:{
		_getSongList() {
			if (!this.disc.id) {//没有Id直接退回
				this.$router.push('/recommend')
				return
			}
			let url=VoCalist(this.disc.id,2)
			this.$axios.get(url).then((res)=>{
				if(res.status==200){this.songs=res.data.data.songs}
			}).catch((err)=>{console.log(err)})
		}
	},
	components:{
		MusicList
	}
	
}
</script>

<style lang="scss" scoped >
.slide-enter-active, .slide-leave-active{ transition: all 0.3s}
.slide-enter, .slide-leave-to{transform: translate3d(100%, 0, 0)}
</style>